<!-- src/components/Hello.vue -->
<template>
    <div>
        <div class="greeting">Hello {{name}}{{exclamationMarks}}</div>
        <button @click="decrement">-</button>
        <button @click="increment">+</button>
        <br/>
        <decorator-component name='World' initialEnthusiasm='5' />
    </div>
</template>

<script lang="ts">
import Vue from "vue";
import DecoratorComponent from "@/DecoratorComponent.vue"

export default Vue.extend({
    props: ['name', 'initialEnthusiasm'],
    data() {
        return {
            enthusiasm: this.initialEnthusiasm
        }
    },
    methods: {
        increment() { this.enthusiasm++; },
        decrement() {
            if (this.enthusiasm > 1) {
                this.enthusiasm--;
            }
        },
    },
    computed: {
        exclamationMarks(): string {
            return Array(this.enthusiasm + 1).join('!');
        }
    },
    components:{DecoratorComponent},
});
</script>

<style>
.greeting {
    font-size: 20px;
}
</style>
